<template>
    <div>
        <div style="padding: 10px;" class="test">
            <!--            分页栏-->
            <div style="margin: 10px 0;">

                <el-form label-width="80px" size="small" style="margin:0 40px;" :rules="rules" :model="form">
                    <el-form-item label="ID" style="display: none">
                        <el-input v-model="form.id" autocomplete="off" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="题目类型" style="display: none">
                        <el-input v-model="form.id" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="出题老师" v-if="user.role == 'ROLE_ADMIN'">
                        <el-select clearable filterable v-model="form.teacherId" placeholder="请选择">
                            <el-option v-for="item in teacher" :key="item.teacherId" :label="item.teacherName"
                                       :value="item.teacherId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="课程名称">
                        <el-select clearable filterable v-model="form.courseId" placeholder="请选择">
                            <el-option v-for="item in course" :key="item.courseId" :label="item.courseName"
                                       :value="item.courseId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="题干">
                        <el-input type="textarea" :rows="3"  v-model="form.questionTitle" autocomplete="off"
                                  @focus="focus('questionTitle',form.questionTitle)"></el-input>
                    </el-form-item>
                    <el-form-item label="正确答案">
                        <el-input type="textarea" :rows="3"  v-model="form.correctAnswer" autocomplete="off"
                                  @focus="focus('correctAnswer',form.correctAnswer)"></el-input>
                    </el-form-item>

                    <el-form-item label="分数">
                        <el-input-number v-model="form.score" :precision="1" :step="0.5" :min="1"
                                         :max="20"></el-input-number>
                    </el-form-item>
                    <el-form-item label="解析">
                        <el-input v-model="form.parse" autocomplete="off" @focus="focus('parse')"></el-input>
                    </el-form-item>
                    <el-form-item label="难度">
                        <el-rate
                                v-model="form.difficult"
                                :texts="texts"
                                show-text
                                style="display: inline"
                        >
                        </el-rate>
<!--                        <label style="float: right;margin-right: 50%">使用状态:-->
<!--                            <el-switch-->
<!--                                    v-model="form.useStatus"-->
<!--                                    active-color="#13ce66"-->
<!--                                    inactive-color="#ff4949"-->
<!--                                    active-value="1"-->
<!--                                    inactive-value="0"-->
<!--                            >-->
<!--                            </el-switch>-->
<!--                        </label>-->
                    </el-form-item>
                    <el-form-item label="知识点">
                        <el-input v-model="form.knowledge"  placeholder="请输入知识点，多知识点与‘，’分隔"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button size="median" type="primary" @click="save">确 定</el-button>
                    <el-button size="median" @click="form = {}">重 置</el-button>
                </div>
            </div>
            <el-dialog :visible.sync="dialogVisible" width="50%">
                <div>
                    <vue-editor v-model="content" :editor-toolbar="customToolbar"/>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="editorSave">确 定</el-button>
                    <el-button @click="dialogVisible = false">取 消</el-button>
                </div>
            </el-dialog>

        </div>
    </div>
</template>

<script>

    import request from "../utils/request";
    import {serverIp} from "../../public/config";

    export default {
        name: 'Objective',
        components: {},
        data() {
            return {
                form: {useStatus: "1", score: 1, difficult:3,questionType:5,createTime:new Date()},
                roles: {},
                user:{},
                serverIp: serverIp,
                dialogVisible: false,
                search: '',
                pageSize: 5,
                pageNum: 1,
                total: 20,
                tableData: [],
                teacher: [],
                course: [],
                content: '',
                formType: '',
                correct: [],
                correctAnswer: [{value: "A"}, {value: "B"}, {value: "C"}, {value: "D"}],
                texts: ['很简单', '简单', '一般', '难', '很难'],
                rules: {
                    adminId: [
                        {required: true, message: '请输入用戶ID', trigger: 'blur'},
                        {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ]
                },
                customToolbar: [
                    ["bold", "italic", "underline"],
                    [{list: "ordered"}, {list: "bullet"}],
                    ["image", "code-block"]
                ]

            }
        },
        created() {
            this.getUser();
            this.getTeacher();
            this.getCourse();
            if (this.$route.params.form) {
                console.log(this.$route.fullPath)
                this.form = this.$route.params.form;
            }

        },
        methods: {
            getUser() {
                this.user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
                if (!this.user) {
                    this.$message.info("获取用户失败，请重新登录")
                }
            },
            save() {
                //处理教师id
                if(this.user.role == "ROLE_TEACHER"){
                    this.form['teacherId'] = this.user.userId;
                }
                // this.form['createTime'] = new Date(); //设置时间
                console.log("form:", this.form);
                if (this.form.id) { // 更新
                    request.post('/question/save', this.form).then(res => {
                        console.log("code:", res.code)
                        if (res.code == '200') {
                            this.$message.success("保存成功")
                        } else {
                            this.$message.error("保存失败")
                        }
                    }).catch((err) => {
                        this.$message.error(err);
                    })
                } else { //新增
                    request.post("/question/save", this.form).then(res => {
                        console.log(res.data)
                        if (res.code == '200') {
                            this.$message.success("添加成功")
                        } else {
                            this.$message.error("添加失败")
                        }
                    }).catch((err) => {
                        this.$message.error("添加失败");
                        this.$message.error(err);
                    })
                }
            },
            getTeacher() {
                //请求教师信息数据
                request.get("/teacher/findAll").then(res => {
                    console.log("res:", res);
                    this.teacher = res.data
                })
            },
            getCourse() {
                //请求课程信息数据
                if (this.user.role == "ROLE_TEACHER") {
                    var params = {
                        teacherId:this.user.userId
                    }
                }else{
                    var params = {
                        teacherId:""
                    }
                }
                request.get("/course/findAll", {
                    params: params
                }).then(res => {
                    console.log("res:", res);
                    this.course = res.data
                })
            },
            focus(formType, formValue) {
                this.formType = formType
                this.content = formValue;
                this.dialogVisible = true;
            },
            editorSave() {
                this.$message.info(this.content);
                this.form[this.formType] = this.content;
                this.content = '';
                this.dialogVisible = false;
            },


        },

    }
</script>



